<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>显示数据三种方案</title>
  <style>
    [v-cloak] {
      display: none;
    }
    span {
      display: inline-block;
      margin-right: 15px;
    }
  </style>
</head>
<body>

  <div id="app" v-cloak>
    <a href="https://www.jb51.net/article/259768.htm">h函数的使用方法</a>
    <component :is="render"></component>
  </div>
  
  <script src="../lib/vue.3.4.js"></script>
  <script>
    /*
      如果要绑定v-model:value这种
      {
        :value: _d.aaa,
        ["onUpdate:value"]: (value) => {
          _d.aaa = value;
        }
      }
      绑定事件
      {
        onClick: () => {
          console.log('点击')
        }
      }
    */

    const app = Vue.createApp({
      data () {
        return {
          num: 1
        }
      },
      mounted() {

      },
      methods: {
        render() {
          return Vue.h("div", {
            class: 'cs-div',
            onClick: () => {
              console.log('kjkjk')
            }
          }, [
            Vue.h('p', '我叫张三'),
            Vue.h('p', {
              style: {
                color: 'red',
              },
              innerText: '男'
            }),
            Vue.h('p', '就读于重庆大学')
          ]);
        }
      }
    }).mount('#app');
  </script>
</body> 
</html>





